<template>
  <div>
    <!--    搜索栏开始-->
    <el-form :inline="true" ref="searchData" :model="searchData" label-width="80px">
      <el-form-item label="仓库">

        <el-select v-model="searchData.storehouseSearch"  multiple
                      @change="changeOptions('storehouse','nameOptions')" placeholder="请选择">
          <el-option
            v-for="item in storehouseOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="名称">
        <el-select v-model="searchData.nameSearch"  multiple
                   @change="changeOptions('name','standardsOptions')" placeholder="请选择">
          <el-option
            v-for="item in nameOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规格">
        <el-select v-model="searchData.standardsSearch" multiple
                   @change="changeOptions('standards','glossOptions')" placeholder="请选择">
          <el-option
            v-for="item in standardsOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="光泽度">
        <el-select v-model="searchData.glossSearch"  multiple
                   @change="changeOptions('gloss','typeOptions')" placeholder="请选择">
          <el-option
            v-for="item in glossOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="种类">
        <el-select v-model="searchData.typeSearch"  multiple placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="记录种类">
        <el-select v-model="searchData.recordType" clearable placeholder="请选择">
          <el-option
            v-for="item in recordTypeOptions"
            :key="item.key"
            :label="item.key"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="记录时间">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请开始选择时间"
                        v-model="searchData.startDate"></el-date-picker>
        -
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请结束选择时间"
                        v-model="searchData.endDate"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-remove" @click="onReset">重置</el-button>

      </el-form-item>
    </el-form>
    <!--搜索栏结束-->
    <!--数据表-->
    <!--    懒加载方式 点击下拉框时请求后端返回数据-->
    <!--    <el-table-->
    <!--      :data="tableData"-->
    <!--      style="width: 100%;margin-bottom: 20px;"-->
    <!--      row-key="id"-->
    <!--      border-->
    <!--      lazy-->
    <!--      :load="onSearch"-->
    <!--      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">-->
    <!--    直接加载数据 搜索的时候返回所有数据-->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      stripe
      :tree-props="{children: 'children'}">
      <el-table-column label="编号" width="180" prop="id"></el-table-column>
      <el-table-column label="仓库" prop="storehouse"></el-table-column>
      <el-table-column label="名称" width="180" prop="name"></el-table-column>
      <el-table-column label="规格" prop="standards"></el-table-column>
      <el-table-column label="光泽度" prop="gloss"></el-table-column>
      <el-table-column label="种类" prop="type"></el-table-column>
      <el-table-column label="数量" prop="number"></el-table-column>
      <el-table-column label="操作">
        操作
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <template>
            <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              @confirm="handleDelete(scope.$index, scope.row)"
              title="确定删除吗？"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger">删除
              </el-button>
            </el-popconfirm>
          </template>
        </template>

      </el-table-column>
    </el-table>
    <el-button type="success" @click="addRecord" size="small"> 添加</el-button>


    <!--    添加和编辑的提示框，内部是一个表单-->
    <el-dialog
      :title="dialogTitle"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="仓库" prop="storehouse">
          <el-input v-model="form.storehouse" :disabled="form.storehouse===null"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" :disabled="form.name===null" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="standards">
          <el-input v-model="form.standards" :disabled="form.standards===null"></el-input>
        </el-form-item>
        <el-form-item label="光泽度" prop="gloss">
          <el-input v-model="form.gloss" :disabled="form.gloss===null"></el-input>
        </el-form-item>
        <el-form-item label="种类" prop="type">
          <el-input v-model="form.type" :disabled="form.type===null"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave('form')">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
  import NumRecord from "./NumRecord";

  export default {
    name: "TypeRecord",
    data() {
      // 添加时验证表单
      var validateValue = (rule, value, callback) => {
        if (value === '') {
          callback(new Error("请输入此项！"))
        }
        callback();
      };
      return {
        dialogTitle:'',
        dialogVisible: false,

        // 添加或编辑表单数据
        form: {
          id: '',
          storehouse: '',
          name: '',
          standards: '',
          gloss: '',
          type: '',
        },

        // 添加或编辑时验证
        rules: {
          storehouse: [{required: true, message: '请输入仓库名', trigger: 'blur'}],
          // 编辑时下面的value为null，所以不能用跟上面一样的验证
          name: [{required: true, validator: validateValue, trigger: 'blur'}],
          standards: [{required: true, validator: validateValue, trigger: 'blur'}],
          gloss: [{required: true, validator: validateValue, trigger: 'blur'}],
          type: [{required: true, validator: validateValue, trigger: 'blur'}],
        },

        storehouseOptions: [],
        nameOptions: [],
        standardsOptions: [],
        glossOptions: [],
        typeOptions: [],
        recordTypeOptions: [{key: "进货记录", value: 0}, {key: '出货记录', value: 1}, {key: '流水记录', value: 2}, {
          key: '库存记录',
          value: 3
        }],
        searchData: {
          storehouseSearch: [],
          nameSearch: [],
          standardsSearch: [],
          glossSearch: [],
          typeSearch: [],
          startDate: '',
          endDate: ''
        },
        tableData: [],


      }
    },
    methods: {

      // 搜索值改变时触发的方法
      changeOptions(change,search) {
        if (change==='storehouse') {
          // 下拉框清空
          this.nameOptions = [];
          this.standardsOptions = [];
          this.glossOptions = [];
          this.typeOptions = [];
          // 选择的内容清空
          this.searchData.nameSearch = [];
          this.searchData.standardsSearch = [];
          this.searchData.glossSearch = [];
          this.searchData.typeSearch = [];

        } else if (change==='name') {
          this.standardsOptions = [];
          this.glossOptions = [];
          this.typeOptions = [];
          this.searchData.standardsSearch = [];
          this.searchData.glossSearch = [];
          this.searchData.typeSearch = [];
        } else if (change==='standards') {
          this.glossOptions = [];
          this.typeOptions = [];
          this.searchData.glossSearch = [];
          this.searchData.typeSearch = [];
        } else if (change==='gloss') {
          this.typeOptions = [];
          this.searchData.typeSearch = [];
        }
        // 重新搜索下拉框
        this.searchOptions(search);
      },
      // 搜索下拉框方法
      searchOptions(key) {
          if (key === '' && this.searchData.storehouseSearch.length === 0) {
            this.$http.post("/searchOptions", this.searchData).then(res => {
              this.storehouseOptions = res.data;
            })
          } else if (key === 'nameOptions' && this.searchData.nameSearch.length===0 && this.searchData.storehouseSearch.length > 0) {
            this.$http.post("/searchOptions", this.searchData).then(res => {
              this.nameOptions = res.data;
            })
          } else if (key === 'standardsOptions' && this.searchData.standardsSearch.length===0 && this.searchData.nameSearch.length > 0) {
            this.$http.post("/searchOptions", this.searchData).then(res => {
              this.standardsOptions = res.data;
            })
          } else if (key === 'glossOptions' && this.searchData.glossSearch.length===0 && this.searchData.standardsSearch.length > 0) {
            this.$http.post("/searchOptions", this.searchData).then(res => {
              this.glossOptions = res.data;
            })
          } else if (key === 'typeOptions' && this.searchData.typeSearch.length===0 && this.searchData.glossSearch.length > 0) {
            this.$http.post("/searchOptions", this.searchData).then(res => {
              this.typeOptions = res.data;
            })
          }
      },
      //重置搜索条件方法
      onReset(){
        // 下拉框清空
        this.nameOptions = [];
        this.standardsOptions = [];
        this.glossOptions = [];
        this.typeOptions = [];
        // 选择的内容清空
        this.searchData.storehouseSearch=[];
        this.searchData.nameSearch = [];
        this.searchData.standardsSearch = [];
        this.searchData.glossSearch = [];
        this.searchData.typeSearch = [];
      },
      // 搜索方法
      onSearch() {
        this.$http.post("/searchTypeData", this.searchData).then(res => {
          this.tableData = res.data;
        })
      },
      // 添加和编辑的取消按钮方法
      cancel() {
        this.form = {};
        this.dialogVisible = false;

      },
      // 添加记录
      addRecord() {
        this.dialogVisible = true;
        this.dialogTitle = "添加记录";
        // 编辑时form中没有的值为null，所以添加时给个默认值''
        this.form = {
          id: '',
          name: '',
          standards: '',
          gloss: '',
          type: '',
          storehouse: '',
        };
      },
// 编辑方法
      handleEdit(index, row) {
        this.dialogVisible = true;
        this.dialogTitle = '编辑记录';
        // 这个请求为后端保存编辑之前的值，用于编辑保存时的where条件
        this.$http.post("/beforeSave", row).then(res => {
          if (res.data.status) {
            // 深度拷贝，复制值而不是原数据的地址
            this.form = JSON.parse(JSON.stringify(row));
          } else {
            this.$message.error("系统错误，请稍后再试")
          }
        })

      },
      // 保存方法
      onSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post("/saveTypeData", this.form).then(res => {
              if (res.data.status) {
                this.$message({
                  message: '恭喜你' + res.data.message,
                  type: 'success'
                });
                this.form = {};
                this.dialogVisible = false;
                location.reload();
              } else {
                this.$message.error(res.data.message);
              }
            });
          } else {
            this.$message.error('请正确输入后再试！');
            return false;
          }
        });


      },

      // 删除方法
      handleDelete(index, row) {
        this.$http.post("/deleteTypeData",row).then(res => {
          if (res.data.status) {
            this.$message({
              message: "恭喜你" + res.data.message,
              type: 'success'
            });
            location.reload();
          } else {
            this.$message.error(res.data.message);
          }
        })
      },


    },
    created() {
      this.searchOptions('', false);
    }
  }
</script>

<style scoped>

</style>
